import React, { memo,useRef } from 'react'

import { Carousel } from 'antd'

import { BannerWrap } from './style'

export default memo(function Banners(props) {
  
  const { banners,setBgImage } = props
  const bannerRef = useRef()

  const beforeChange = (from,to) => {
    setBgImage(to)
  }

  return (
    <BannerWrap>
      <Carousel 
        beforeChange={beforeChange}
        autoplay
        className="banner" 
        ref={bannerRef} 
        effect="fade"
        dots={{className:'dot'}}
      >
        {
          banners.map(i => {
            return (
              <div className="banner-item" key={i.targetId}>
                <img src={i.imageUrl} alt="" />
              </div>
            )
          })
        }

      </Carousel>
      <a href="/" className="download"> </a>
      <div className="opt">
        <div className="btn prev" onClick={() => bannerRef.current.prev()}></div>
        <div className="btn next" onClick={() => bannerRef.current.next()}></div>
      </div>
    </BannerWrap>
  )
})
